<template>
	<view class="cu-item shadow ">
		<view class="cu-list menu-avatar item">
			<image class="bg-imgs" :src="formatImg(cardInfo.bank_name)" mode="widthFix"></image>
			<view class="del-img" @tap="showDelCard()">
				<image  src="/static/img/bankCard2.png" mode="widthFix"  ></image>
			</view>
			<view class="cu-item">
				<view class="flex-sub">
					<view class="project-title">{{ cardInfo.bank_name }}</view>
					<view class="timer">添加时间：{{ moment(cardInfo.date).format("YYYYMMDD") }}</view>
					<view class="num">{{ cardInfo.bank_number }}</view>
				</view>
			</view>
		</view>
		<view class="cu-modal" :class="isShow? 'show': ''" @tap="isShow=false">
			<view class="cu-dialog bg-white">
				<view class="flex flex-direction padding justify-end bank-box">
					<image class="warning-img" src="https://test.hrycf.com/hryxcx/delbankCard.png"></image>
					<view class="text-lg">
						温馨提示
					</view>
					<text class="text-df bg-white" style="line-height: 214rpx;">
						您确定要移除该银行卡吗？
					</text>
					<view>
						<button class="cu-btn bg-orange round" @tap.stop="delCard(cardInfo.id)">确定</button>
						<view class="cancel"><span  @tap.stop="isShow=false">取消</span></view>
					</view>
				</view>
				<!-- <view class="action close-wrapper text-white text-xl" @tap="hideModal">
					<text class="cuIcon-close"></text>
				</view> -->
			</view>
		</view>
	</view>
</template>

<script>
	import bankList from "@/config/bankList.config.js";
	import moment from "moment";
	export default {
		name: "index",
		props: {
			cardInfo: {
				type: Object
			},
			nth:{
				type: Number
			}
		},
		data() {
			let that = this;
			return {
				imgUrl: that.$mConfig.assetsPath,
				bankList: bankList,
				isShow: false
			};
		},
		methods: {
			moment,
			showDelCard(){
				this.isShow = true
			},
			async delCard(id){
				let indexInfo = await this.$apis.delCard({ id: id });
				this.isShow = false
				this.$emit("delCard", id);
			},
			formatImg(name) {
				let value = this.bankList.find(value => {
				        if (value.text === name) {
				          return value;
				        }
				      });
				      if (value) {
				        return value.img;
				      }
			}
		}
	};
</script>

<style lang="scss" scoped>
	.item{
		background:linear-gradient(90deg,rgba(255,92,156,1),rgba(255,166,106,1));
		border-radius:20rpx;
		margin: 0 30rpx;
		overflow: hidden;
		position: relative;
		z-index: 1;
	}
	.cu-list.menu-avatar>.cu-item{
		background-color: transparent;
		padding:  0rpx 125rpx 35rpx;
		z-index: 10;
	}
	.project-title {
		font-size:28rpx;
		font-family:PingFang SC;
		font-weight:500;
		color:rgba(255,255,255,1);
	}
	.timer{
		color:rgba(255,255,255,1);
		font-size:20rpx;
		font-family:PingFang SC;
		font-weight:500;
		color:rgba(255,255,255,1);
		margin-bottom: 20rpx;
	}
	.num{
		font-size:36rpx;
		font-family:PingFang SC;
		font-weight:500;
		color:rgba(255,255,255,1);
	}
	.bg-imgs{
		position: absolute;
		width: 100%;
		z-index: 0;
	}
	.del-img{
		text-align: right;
		image{
			width: 44rpx;
			height: 44rpx;
		}
		z-index: 10;
	}
	.cu-dialog{
		width: 560rpx;
		overflow: visible;
		border-radius: 20rpx;
		.bank-box{
			padding: 30rpx 30rpx 10rpx 30rpx;
		}
	}
	.warning-img{
		// width: 88rpx;
		// margin: 0 auto;
		width:321rpx;
		height: 284rpx;
		position: absolute;
		top: 0;
		left: 50%;
		transform: translate(-50%,-50%);
		z-index: 9999;
	}
	.text-lg{
		font-size:48rpx;
		font-family:PingFang SC;
		font-weight:bold;
		color:#100808;
		margin-top: 130rpx;
	}
	.text-df{
		font-size:32rpx;
		font-family:PingFang SC;
		font-weight:500;
		color:#646464;
	}
	.bg-gray{
		background: #B8B8B8;
		border-radius:35rpx;
		font-size:28rpx;
		font-family:PingFang SC;
		font-weight:500;
		color:rgba(255,255,255,1);
		padding: 22rpx 68rpx;
		margin-right: 30rpx;
	}
	.bg-orange{
		background:linear-gradient(270deg,rgba(255,106,0,1),rgba(255,157,90,1));
		font-size:28rpx;
		font-family:PingFang SC;
		font-weight:500;
		color:rgba(255,255,255,1);
		padding: 22rpx 68rpx;
	}
	.cu-btn{
		display: block;
		width: 450rpx;
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		padding: 0;
		margin: 0 auto;
	}
	.cancel{
		text-align: center;
		line-height: 88rpx;
		color: #969696;
		margin-top: 20rpx;
	}
</style>
